<!-- 系统日志管理 -->
<template>
    <div class="user_main">
        <div class="safelist-search-container mb-16">
            <a-row class="search-row">
                <a-col class="mr-8">
                    <a-input style="width: 200px;" v-model:value="state.searchData.likeUserName" placeholder="输入用户名" />
                </a-col>
                <a-col class="mr-8">
                    <a-select v-model:value="state.searchData.actionType" class="mr-8" style="width: 150px;"
                        placeholder="全部操作" optionFilterProp="label">
                        <a-select-option value="">全部操作</a-select-option>
                        <a-select-option value="login">登录系统</a-select-option>
                        <a-select-option value="logout">退出系统</a-select-option>
                        <a-select-option value="resetPassword">重置密码</a-select-option>
                        <a-select-option value="modifyPassword">修改密码</a-select-option>
                        <a-select-option value="createUser">创建用户</a-select-option>
                        <a-select-option value="deleteUser">删除用户</a-select-option>
                        <a-select-option value="modifyUser">修改用户</a-select-option>
                    </a-select>
                </a-col>
                <a-col class="mr-8">
                    <a-range-picker v-model:value="state.searchData.date" 
                    :allowClear="false"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                     @change="changeDate" />
                </a-col>
                <a-col>
                    <a-button type="primary" class="mr-8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" class="mr-8"  ghost @click="handleEmpty">重置</a-button>
                    <a-button type="primary" ghost @click="handleBatchExport">批量导出</a-button>
                </a-col>
            </a-row>
        </div>
        <div class="safelist-table-container">
            <a-table 
                :columns="tableProps.columns" 
                :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination" 
                :scroll="{ y: 'calc(100vh - 200px)' }"
                :row-selection="tableProps.rowSelection"
                :row-key="record => record.id">
                
            </a-table>
        </div>


    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { message } from "ant-design-vue";
import dayjs from 'dayjs';
import { sysLogQueryPage, sysLogExportByIdList } from '@/service/nmcApi'
import { downloadExcelByBlob, downloadZipByBlob } from "@/utils";
const tableProps = ref({
    columns: [
        {
            title: '操作ID',
            dataIndex: 'id',
            width: 120
        },
        {
            title: '操作用户',
            dataIndex: 'userName',
            width: 120
        },
        {
            title: '用户角色',
            dataIndex: 'roleName',
            width: 120
        },
        {
            title: '来源',
            dataIndex: 'platformType',
            width: 100
        },
        {
            title: '操作类型',
            dataIndex: 'actionType',
            width: 120
        },
        {
            title: '操作明细',
            dataIndex: 'actionInfo',
            width: 200
        },
        {
            title: '操作时间',
            dataIndex: 'createTime',
            width: 150
        },

    ],
    dataSource: [], //列表数据
    rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
            state.selectedRows = selectedRows;
            state.selectedRowKeys = selectedRowKeys;
        }
    },
    pagination: {
        current: 1,//当前页数
        pageSize: 10,//每页条数
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `共有${total}条数据`,
        onChange: (current, pageSize) => {
            tableProps.value.pagination.current = current;
            tableProps.value.pagination.pageSize = pageSize;
            init();
        }
    }
})


const state = reactive({
    searchData: {
        likeUserName: '',
        actionType: '',
        date: []
    },
    selectedRows: [],
    selectedRowKeys: []
})



onMounted(() => {
    init();
})



// 批量导出
const handleBatchExport = () => {
    if (state.selectedRowKeys.length === 0) {
        message.warning('请选择要导出的数据');
        return;
    }
    sysLogExportByIdList({
        idList: state.selectedRowKeys
    }).then(res => {
        console.log(res, 'res');
        // 下载
        downloadExcelByBlob(res, '系统日志.xls')
    })
    message.success(`导出${state.selectedRowKeys.length}条数据`);
}

//获取列表数据
const init = () => {
    // 模拟API调用

    sysLogQueryPage({
        // pageNum: tableProps.value.pagination.current,
        // pageSize: tableProps.value.pagination.pageSize,
        // ...state.searchData,
        // startCreateTime: state.searchData.date[0] ? state.searchData.date[0] + ' 00:00:00' : '',
        // endCreateTime: state.searchData.date[1] ? state.searchData.date[1] + ' 23:59:59' : ''
    }).then(res => {
        if (res && res.status === "000_0000_0000") {
            tableProps.value.dataSource = res.result.list
            tableProps.value.pagination.total = Number(res.result.total)
        } else {
            tableProps.value.dataSource = []
            tableProps.value.pagination.total = 0
            message.warning('暂无数据')
        }

    })
}

//搜索
const handleSearch = () => {
    tableProps.value.pagination.current = 1;
    init()
}

//重置
const handleEmpty = () => {
    state.searchData = {
        likeUserName: '',
        actionType: '',
        date: []
    }
    tableProps.value.pagination.current = 1;
    init()
}

const changeDate = () => {
    // 日期变化处理
}

</script>

<style lang="less" scoped>
.user_main {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;

    .action_box {
        display: flex;
        font-size: 14px;
        color: #00CCCC;

        span {
            cursor: pointer;
            margin-right: 8px;
        }
    }
}

.mb-16 {
    margin-bottom: 16px;
}

.mr-8 {
    margin-right: 8px;
}
</style> 